<template>
  <PageContainer>
    <view class="container">
      <Header title="表格下载" />
      <view class="bgf pa-16 ma-16">
        <view class="fz-16">
          <icon class="ali-icon icon-xiazaijilu fz-24" style="color: #2878ff" />
          <text>下载地址</text>
        </view>
        <view class="fz-12 color6 my-16">
          <view>1. 请复制下列下载链接到浏览器下载表格文件；</view>
          <view>2. 在数据量过大时，将生成多个链接分别下载；</view>
        </view>
        <view v-for="(url, index) in urlList" :key="index" class="disFlxJS my-5 py-10 br-4 linkBox">
          <view class="fz-12 ov-1 px-12" style="flex: 1">{{ url }}</view>
          <view class="fz-14 copyBtn" @click="copyUrl(url)">复制链接</view>
        </view>
        <view class="fz-12 color6 mt-16">
          提示：可以复制链接后发送给“文件传输助手”，或者直接发送给相关负责人，收到链接后可直接下载。
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* exportDetail 表格下载 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { onLoad } from '@/router';
  import { Toast } from '@/utils';
  import { ref } from 'vue';

  const urlList = ref<string[]>([]);
  onLoad(async (options) => {
    urlList.value = options.urls;
  });

  function copyUrl(url: string) {
    uni.setClipboardData({
      data: url,
      success: () => {
        Toast('复制成功', 'success', 1500)
      },
      fail:(err) => {
        console.log(err);
      }
    });
  }
</script>

<style lang="scss" scoped>
  .linkBox {
    background-color: #f2f3f5;
  }
  .color6 {
    color: #646566;
  }
  .copyBtn {
    color: #2878ff;
    padding: 0 24rpx;
    border-left: solid 1px #c8cacc;
  }
</style>
